<template>
  <el-card>
    <el-table :data="tableData">
      <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
      <el-table-column prop="id" label="商品序号"> </el-table-column>

      <el-table-column prop="data" label="上市日期"> </el-table-column>
      <el-table-column prop="goodsRate" label="商品利率"> </el-table-column>
      <!-- 选购为一个按钮点击 添加数量，所购数量会在user页面显示 -->
      <el-table-column prop="quantity" label="选购">
        <template slot-scope="scope">
          <el-tooltip content="购买" placement="right">
            <el-button
              type="success"
              circle
              icon="el-icon-goods"
              @click="openConfirmDialog(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pager.page"
      :page-size="pager.size"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
    ></el-pagination>
    <el-dialog
      :visible="confirmFlag"
      title="选购"
      class="openDialog"
      @close="confirmFlag = false"
    >
      <el-form>
        <el-form-item>
          <el-input
            v-model="goodsDTO.goodsPrice"
            placeholder="请出入购买的金额"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible="bandcardFlag"
      title="绑定银行卡"
      class="openDialog"
      @close="bandcardFlag = false"
    >
      <el-form>
        <el-form-item>
          <el-input
            v-model="goodsDTO.goodsPrice"
            placeholder="请出入购买的金额"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      confirmFlag: false,
      tableData: [{ goodsName: "aaa" }],
      // 分页的数据
      pager: {
        currentPage: 1, //从第一条开始分页
        size: 5, //每页显示的数据
        total: 0,
      },
      goodsDTO: {
        id: 0,
        goodsName: "",
        goodsRate: "",
        goodsPrice: "",
      },
      OrderDTO: {
        goodsPrice: "",
        name: "",
        goodsName: "",
        id: 0,
        createTime: "",
        profit: "",
      },
      user: {
        username: "",
      },
      cardNumber: 0,
      cardDTO: {
        token: "",
        cardNumber: 0,
      },
    };
  },
  created() {
    this.listPage();
    this.getUsername();
    this.setToken();
  },
  methods: {
    setToken() {
      this.cardDTO.token = Cookies.get("token");
    },
    handleCurrentChange(val) {
      console.info("改变分页起始数据" + val);
      this.pager.currentPage = val;
      this.listPage();
    },
    handleSizeChange(val) {
      console.info("改变每页显示的最大条数" + val);
      this.pager.size = val;
      this.listPage();
    },
    getUsername() {
      this.user.username = Cookies.get("username");
    },
    openConfirmDialog(row) {
      this.$http
        .post("http://127.0.0.1:8001/card/getCardByUserId", {
          params: {
            token: this.cardDTO.token,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.data != 0) {
            this.confirmFlag = !this.confirmFlag;
            this.goodsDTO = row;
            console.log(this.row);
          } else {
            setTimeout(() => {
              this.$message({
                message: "请绑定银行卡",
                type: "success",
              });
            }, 1000);
            this.$router.push("/userCenter");
          }
        })
        .catch((e) => {
          this.$message.error("请求失败");
        });
    },
    save() {
      this.setToken();
      console.log(this.row);
      this.$http
        .post("http://127.0.0.1:8001/order/createOrder", {
          params: {
            token: this.cardDTO.token,
            goodsPrice: this.goodsDTO.goodsPrice,
            goodsId: this.goodsDTO.id,
          },
        })
        .then((res) => {
          if (res.data.code == 1000) {
            this.$message({
              message: "购买成功",
              type: "success",
            });
            this.confirmFlag = !this.confirmFlag;

            this.listPage();
          }
        });
    },

    listPage() {
      this.$http
        .post("http://127.0.0.1:8001/goods/querGoodsAsc", {
          params: {
            currentPage: this.pager.currentPage,
            size: this.pager.size,
            username: this.username,
          },
        })
        .then((res) => {
          console.info(res);

          this.tableData = res.data.data.goods;
          this.pager.total = res.data.data.total;
        });
      console.log(this.tableData);
    },
  },
};
</script>

<style scoped>
.el-table-column {
  width: 20%;
}
.el-card {
  width: 100%;
}
.openDialog {
  margin-left: 25%;
  width: 50%;
}
</style>